<template>
  <div class="m-main-container" @click="getList">
    <div class="m-swiperTab-container">
      <div class="m-swiperTab-title">
        <div class="m-swiperTab-title-top">
          <img src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" class="u-title">
          <div class="u-text">
            严选好物&nbsp;用心生活
          </div>
        </div>
        <img src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" class="u-bg">
      </div>
      <div class="m-swiperTab-list-container">
        <van-swipe :loop="false" class="swipe-container" :width="88.75">
          <van-swipe-item v-for="item, index in navToList" :key="index">
            <div class="item-list">
              <div class="item-top flex-c">
                <img :src="item[0].picUrl">
                <div class="item-top-one">{{ item[0].mainTitle }}</div>
                <div class="item-top-two">{{ item[0].viceTitle }}</div>
              </div>
              <div class="item-top flex-c">
                <img :src="item[1].picUrl">
                <div class="item-top-one">{{ item[1].mainTitle }}</div>
                <div class="item-top-two">{{ item[1].viceTitle }}</div>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="m-list-content flex">
        <div class="m-item flex-c">
          <div style="margin-bottom: 7px;background: white;" v-for="flow in looklistleft" :key="flow.topicId">

            <img class="m-item-cart" :src="flow.picUrl">
            <div class="m-item-title">
              {{ flow.title }}
            </div>
            <div class="m-item-bottom flex">
              <div class="m-item-bottom-left">
                <img class="avatar" :src="flow.avatar">
                <div class="avatar-name">{{ flow.nickname }}</div>
              </div>
              <div class="m-item-bottom-right">
                <img class="hassee" src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png">8847
              </div>
            </div>
          </div>
        </div>
        <div class="m-item flex-c" style="flex-shrink: 1;justify-content: flex-start;">
          <div style="margin-bottom: 7px;background: white;" v-for="flow in looklistright" :key="flow.topicId">
            <img class="m-item-cart" :src="flow.picUrl">
            <div class="m-item-title">
              {{ flow.title }}
            </div>
            <div class="m-item-bottom flex">
              <div class="m-item-bottom-left">
                <img class="avatar" :src="flow.avatar">
                <div class="avatar-name">{{ flow.nickname }}</div>
              </div>
              <div class="m-item-bottom-right">
                <img class="hassee" src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png">8847
              </div>
            </div>
          </div>
        </div>

      </div>
    </van-list>

  </div>
</template>

<script setup lang="ts">
import { getworthBuyingList, getlookList } from '../../api/worthbuying'
import type { navListModel, lookListModel } from '../../api/worthbuying'
import { ref, onMounted } from 'vue'

//轮播图数据
const navList = ref<navListModel[]>([])
//计算轮播图使用数据
const navToList = ref<any>([])
//瀑布流数据

const page = ref(1)
const size = ref(2)
//瀑布流触底相关事件参数
const loading = ref(false);
const finished = ref(false);
const onLoad=()=>{
  getList()
  loading.value = false;
}
//轮播图整合数据
const looklistleft = ref<lookListModel[]>([])
const looklistright = ref<lookListModel[]>([])
//获取轮播图功能函数
const getworthList = async () => {
  try {

    let result = await getworthBuyingList()
    navList.value = result.data.data.navList
    let arr = []
    for (var i = 0; i <= 6; i++) {
      arr.push(navList.value[i])
      // console.log(arr2)
      arr.push(navList.value[i + 7])
      // console.log(arr2)
      navToList.value[i] = arr
      // console.log(arr1)
      arr = []
    }
    console.log(navToList.value)


  } catch (error) {
    console.log(error)
  }
}
//获取瀑布流功能函数
const getList = async () => {
  try {
    let result = await getlookList(page.value, size.value)
    console.log(result.data.data.result[0].look)
    looklistleft.value.push(result.data.data.result[0].look)
    looklistleft.value.push(...result.data.data.result[0].topics)
    looklistright.value.push(result.data.data.result[1].look)
    looklistright.value.push(...result.data.data.result[1].topics)
    page.value += 2
  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  getworthList()
  getList()
})


</script>

<style lang="less" scoped>
.m-swiperTab-container {
  height: 345px;
}

.m-main-container {
  background: #eeeeee;
}

.m-swiperTab-title {
  height: 259px;
  width: 375px;
  position: relative;

  .m-swiperTab-title-top {
    position: absolute;
    height: 34.5px;
    width: 190px;
    left: 5px;
    top: 30px;

    .u-title {
      height: 34.5px;
      width: 65px;
    }

    .u-text {
      position: relative;
      left: 2;
      top: -9px;
      height: 22px;
      display: inline-block;
      font-size: 15px;
      line-height: 22px;
      text-align: center;
      color: white;
    }

  }

  .u-bg {
    height: 259px;
    width: 375px;
  }
}

.m-swiperTab-list-container {
  width: 355px;
  background: white;
  margin: 0 10px;
  height: 270px;
  position: relative;
  left: 0;
  top: -188px;
  border-radius: 10px;

  .swipe-container {
    width: 355px;
    height: 270px;

    .item-list {
      .item-top {
        height: 100.5px;
        width: 84px;
        justify-content: center;
        margin-top: 20px;
        margin-left: 2px;

        img {
          height: 60px;
          width: 60px;
          border: 50%;
          position: relative;
          top: 0;
          left: 12px;
        }

        .item-top-one {
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          text-align: center;
        }

        .item-top-two {
          height: 15px;
          line-height: 15px;
          font-size: 12px;
          text-align: center;
          color: #eee;
        }

      }
    }
  }

}

.m-list-content {
  justify-items: space-between;
  width: 355px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 15px;
}

.m-item {
  width: 172.5px;
  background: #eeeeee;
  align-items: flex-start;
  justify-content: space-between;
  margin-right: 5px;

  .m-item-cart {
    width: 172.5px;
    border-radius: 5px;
  }

  .m-item-title {
    font-size: 14px;
    height: 19.5px;
    padding: 9px 8px 9px 8px;
  }

  .m-item-bottom {
    font-size: 12px;
    justify-content: space-between;
    height: 24px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;

    .avatar {
      width: 24px;
      height: 24px;
      box-sizing: border-box;
      vertical-align: text-bottom;
      border-radius: 50%;
    }

    .m-item-bottom-left {
      .avatar-name {
        display: inline-block;
        line-height: 24px;
        height: 24px;
        font-size: 12px;
        text-align: center;
        position: relative;
        left: 8px;
        top: -4px
      }
    }

    .m-item-bottom-right {
      text-align: center;
      line-height: 24px;
      height: 24px;
      font-size: 10px;

      .hassee {
        height: 16px;
        width: 16px;
        vertical-align: text-bottom;
      }
    }
  }
}

.nomore {
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  background: skyblue;
  position: absolute;
  left: 0;
  bottom: 50px;
  height: 30px;
  width: 375px;
}

.flex {
  display: flex;

}

.flex-c {
  display: flex;
  flex-direction: column;
}</style>